<template>
	<view class="mymember" v-if="show">
		<view class="btns">
			<view class="btn" @click="changeCur(index)" :class="{active:curbtn==index}" v-for="(item,index) in btn" :key="index">{{item}}</view>
		</view>
		<view v-if="curbtn==0">
			<view class="money">
				<view class="member-info">
					<view class="item"><text>Direct</text><text>{{info.first_users_cnt}}</text></view>
					<view class="item"><text>Team</text><text>{{info.first_users_cnt}}</text></view>
				</view>
				<view class="money-info">
					<view class="item"><text>Recharge</text><view class="money-unit"> <text>{{info.recharge}}</text></view></view>
					<view class="item"><text>Withdraw</text><view class="money-unit"> <text>{{info.withdraw}}</text></view></view>
					<view class="item"><text>Team Balance</text><view class="money-unit"> <text>{{info.team_money[0]}}</text></view></view>
				</view>
			</view>
			<view class="member-list">
				<view class="member-list-item" v-for="(item,index) in info.first_users" :key="index">
					<view class="member-list-item-info">
						<image src="" class="head"></image>
						<view class="wrap">
							<view>{{item.username}}</view>
							<view>{{item.mobile}}</view>
						</view>
					</view>
					<view class="member-list-item-time">
						<view>Balance/Invite {{item.usableSum}}({{item.invite_num}})</view>
						<view> {{item.createTime}}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="curbtn==1">
			<view class="money">
				<view class="member-info">
					<view class="item"><text>Direct</text><text>{{info.first_users_cnt}}</text></view>
					<view class="item"><text>Team</text><text>{{info.sec_users_cnt}}</text></view>
				</view>
				<view class="money-info">
					<view class="item"><text>Recharge</text><view class="money-unit"> <text>{{info.recharge}}</text></view></view>
					<view class="item"><text>Withdraw</text><view class="money-unit"> <text>{{info.withdraw}}</text></view></view>
					<view class="item"><text>Team Balance</text><view class="money-unit"> <text>{{info.team_money[1]}}</text></view></view>
				</view>
			</view>
			<view class="member-list">
				<view class="member-list-item" v-for="(item,index) in info.sec_users" :key="index">
					<view class="member-list-item-info">
						<image src="" class="head"></image>
						<view class="wrap">
							<view>{{item.username}}</view>
							<view>{{item.mobile}}</view>
						</view>
					</view>
					<view class="member-list-item-time">
						<view>Balance/Invite {{item.usableSum}}({{item.invite_num}})</view>
						<view>{{item.createTime}}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="curbtn==2">
			<view class="money">
				<view class="member-info">
					<view class="item"><text>Direct</text><text>{{info.first_users_cnt}}</text></view>
					<view class="item"><text>Team</text><text>{{info.trd_users_cnt}}</text></view>
				</view>
				<view class="money-info">
					<view class="item"><text>Recharge</text><view class="money-unit"> <text>{{info.recharge}}</text></view></view>
					<view class="item"><text>Withdraw</text><view class="money-unit"> <text>{{info.withdraw}}</text></view></view>
					<view class="item"><text>Team Balance</text><view class="money-unit"> <text>{{info.team_money[2]}}</text></view></view>
				</view>
			</view>
			<view class="member-list">
				<view class="member-list-item" v-for="(item,index) in info.trd_users" :key="index">
					<view class="member-list-item-info">
						<image src="" class="head"></image>
						<view class="wrap">
							<view>{{item.username}}</view>
							<view>{{item.mobile}}</view>
						</view>
					</view>
					<view class="member-list-item-time">
						<view>Balance/Invite {{item.usableSum}}({{item.invite_num}})</view>
						<view> {{item.createTime}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="none" v-else>
		<image src="../../static/images/member/default.png" class="default"></image>
		<text class="none-txt">no data</text>
		<text class="init-btn">Invite</text>
	</view>
</template>

<script>
	import fetch from '@/common/fetch.js';
	export default{
		data(){
			return{
				show:true,
				curbtn:0,
				btn:['1st','2nd','3rd'],
				info:{}
			}			
		},
		mounted(){
			this.getInfo()
		},
		methods:{
			getInfo(){
				fetch.request('/index/mobile/myteam','','GET').then(res=>{
					console.log(res.data)
					this.info = res.data
				})
			},
			changeCur(index){
				this.curbtn = index
			}
		}
	}
</script>

<style lang="less" scoped>
	.mymember{
		width: 100%;
		min-height: 100%;
	}
	.btns{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		.btn{
			flex: 1;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 14px;
			&.active{
				color: #fff;
				background: #F53D46;
				border-radius: 60rpx;
			}
		}
	}
	.money{
		width: 710rpx;
		background-image: linear-gradient(#F53D46,#ffa553);
		border-radius: 10rpx;
		margin-left: 20rpx;
		padding: 40rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		color: #fff;
		font-size: 12px;
		.member-info,.money-info{
			border-bottom: solid 1rpx #f4f4f4;
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;
			.item{
				display: flex;
				align-items: center;
				flex-direction: column;
				text:nth-child(2){
					font-size: 18px;
					margin-top: 8rpx;
					font-weight: bold;
				}
			}
		}
		.money-info{
			padding-top: 20rpx;
			padding-bottom: 0;
			border-bottom: none;
			.money-unit{
				font-size: 12px;
				font-weight: normal;
				text{
					font-size: 18px;
					margin-top: 8rpx;
					font-weight: bold;
				}
			}
		}
	}
	.member-list{
		margin-top: 60rpx;
		margin-bottom: 40rpx;
		.member-list-item{
			display: flex;
			border-bottom: solid 1rpx #f4f4f4;
			justify-content: space-between;
			padding:20rpx;
			box-sizing: border-box;
			.member-list-item-info{
				display: flex;
				flex: 1;
				.head{
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					background: #a0e5cb;
					margin-right: 10rpx;
				}
				.wrap{
					display: flex;
					flex-direction: column;
					justify-content: space-around;
				}
			}
			.member-list-item-time{
				flex:1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}
		}
	}
	.none{
		width: 100%;
		display: flex;		
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		.default{
			width: 320rpx;
			height: 260rpx;
		}
		.none-txt{
			margin: 60rpx 0 40rpx 0;
			color: #999;
		}
		.init-btn{
			width: 280rpx;
			height: 92rpx;
			line-height: 92rpx;
			color: #fff;
			background: #F53D46;
			text-align: center;
			border-radius: 92rpx;
		}
	}
</style>
